<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{$pagetitle}</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/static/admin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/admin/style/admin.css" media="all">
  <link rel="stylesheet" href="/static/admin/style/global.css" media="all">  
  <style>
	  .cache-progress{ width: 100%; height: 100%; background:rgba(0,0,0,.7); position: fixed; z-index: 1024;left:0px; top: 0px;}
	  .cache-progress .layui-progress{position: fixed; top: 30%; width:80%; margin-left: 10%; z-index: 1024;}
  </style>  
</head>
<body>

	<div class="layui-fluid">
	<div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <div>
                <div class="header-left" style="width:80%">
					  <div class="layui-inline"><h2 class="pagetitle">{$pagetitle}</h2></div>
                </div>
                <div class="header-right search-field" style="width:18%;">

					  <div class="layui-inline">
						  <a class="layui-btn layuiadmin-btn-list" href="{:url('index')}">返回列表</a>
					  </div> 

                </div>
                <div class="clear"></div>
            </div>


        </div>


	<div class="layui-card-body">
	<form class="layui-form" action="" onsubmit="return save_form(this,success_fun)" lay-filter="component-form-element">
	<table class="layui-table">
	  <colgroup>
		<col width="150">
		<col width="150">
		<col width="200">
		<col>
	  </colgroup>
	  <thead>
		<tr>
			<th width="30%">备份名称</th>
			<th width="10%">卷数</th>                  
			<th width="10%">数据大小</th>
			<th width="10%">备份时间</th>
			<th width="10%">是否备份成功</th>
			<th width="10%">备注</th>
		</tr> 
	  </thead>
	  <tbody>
	  {foreach $data as $key=>$v}
		<tr>
			<td class="center">{$v.name}</td>
			<td class="center">{$v.file_num}卷</td>                        
			<td class="center">{$v.file_size|format_bytes}</td>
			<td class="center">{$v.addtime|date="Y-m-d H:i:s"}</td>
			<td class="center">
			  {if condition="$v.file_size>1 "}
				  <span class="layui-badge layui-bg-green">备份成功</span>
			  {else /}
				  <span class="layui-badge layui-bg-gray">备份失败</span>
			  {/if}
			</td>
			<td class="center">
			  <a onclick="set_recovery('{$v.name}')" class="layui-btn layui-btn-sm">恢复</a>
			  <a href="{:url('delete',array("name"=>$v['name']))}" class="layui-btn layui-btn-sm ajax_del">删除</a>                      
			</td>
		</tr>
	   {/foreach}
	  </tbody>
	</table>  
	</form>				  
	</div>
      
	</div>
</div>

  <script src="/static/admin/layui/layui.js"></script>
  <script src="/static/js/jquery.min.js"></script>    
  <script src="/static/js/globals.js"></script>  
  <script>
	var element;
  layui.config({
    base: '/static/admin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form'], function(){
    var $ = layui.$
    ,admin = layui.admin;
    element = layui.element;//注意这里的的element不要var，这是全局变量
  });

function set_recovery(name){
    if(confirm("在恢复数据的时候不能刷新或者关闭浏览器，否则会造成数据丢失！")==true){
        //初始化
		$("body").append('<div class="cache-progress"><div class="layui-progress layui-progress-big"  lay-showpercent="true" lay-filter="component-progress-demo" style=""><div class="layui-progress-bar layui-bg-green" lay-percent="1%"></div></div></div>');
		window.onbeforeunload = function(){ return "正在恢复数据库，请不要关闭！" }
		//这里一定要做个延迟，因为append后无法立即渲染
		setTimeout(function(){
			element.render('progress');
			//初始化成功，下面开始恢复
			var param={
				"name":name,
				"table_index":0,
				"p":1,
			};
			rebake(param);
		},200);		
        return false;
    }
}
//正式恢复数据
function rebake(param){
    $.get("{:url('import')}",param, function(result){
        if(result.code){
            var data=result.msg;
			element.progress('component-progress-demo', data.progress+"%");	
            if(data.progress==100){
                layer.alert("数据完成");                
                window.onbeforeunload = function(){ return null }
                layer.msg("数据恢复成功",function(){
                    history.go(0);
                });                
                
                return;
            }else{
                rebake(data);
            }
        }else{
            alert(result.msg);
        }
    },"json");

}

  </script>

</body>
</html>
